<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <title>咱的天下</title>

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background-color: #f5f5f5;
        }
        .Carousel-wrapper{
            position: relative;
            width: 100vw;
            height: 195px;
        }
        .img-item{
            position: absolute;
            left: 0;
            top:0;
            width: 100vw;
            height: 195px;
            -webkit-transition: opacity .9s linear;
            -moz-transition: opacity .9s linear;
            -o-transition: opacity .9s linear;
            transition: opacity .9s linear;
            opacity: 0;
            filter:alpha(opacity=0);
        }
        #bg1 {
            background: url(img/ad1@2x.png) no-repeat;
            background-size: 100% 100%;
        }
        #bg2 {
            background: url(img/ad1@2x.png) no-repeat;
            background-size: 100% 100%;
        }
        #bg3 {
            background: url(img/ad1@2x.png) no-repeat;
            background-size: 100% 100%;
        }
        #bg4 {
            background: url(img/ad1@2x.png) no-repeat;
            background-size: 100% 100%;
        }
        #bg5 {
            background: url(img/ad1@2x.png) no-repeat;
            background-size: 100% 100%;
        }
        .fadeIn {
            opacity: 100;
            filter: alpha(opacity=100);
        }
        .pagination {
            width: auto;
            display: table;
            margin: 0 auto;
                    }
        .pagination-panel {
            width: 100%;
            position: absolute;
            top:175px;
            left: 0;
            z-index: 100;
            height: auto;
        }
        .pagination li {
            border-radius: 10px;
            height: 10px;
            width: 10px;
            background: #fafafa;
            float: left;
            margin-right: 10px;
            list-style-type: none
        }

        .pagination li.active {
            background: #52c6d8
        }
        .pagination li:last-child {
            margin-right: 0
        }

        .content{
            width: 100%;
            margin-top: 11.5px;
            background-color: #ffffff;
            padding: 19px 0 19px 20px;
            display: flex;
            flex-wrap: wrap;
            box-sizing: border-box;
        }

        .card{
            flex:1;
            text-align: center;
            font-size:0;
            margin-right: 20px;
            box-sizing: border-box;
        }

        .card img{
            width: 64px;
            height: 64px;
            border: 0;
        }
        .card p{
            font-size: 13px;
            color: #313131;
            padding-top: 11px;
            padding-bottom: 20px;
        }
        .footer{
            width:100%;
            height: 89px;
            background-color: #e2f5fd;
            color: #0386d8;
            text-align: center;
            margin-top: 12px;
        }
        .footer p:nth-child(1){
            padding-top: 14px;
            font-size: 12px;
        }
        .footer p:nth-child(2){
            padding-top: 10px;
            font-size: 10px;
        }
        .footer p:nth-child(3){
            padding-top: 12px;
            font-size: 9px;
        }

    </style>
</head>
<body>
<div class="Carousel-wrapper">
    <div id="imgs">
        <div class="img-item" id="bg1"></div>
        <div class="img-item" id="bg2"></div>
        <div class="img-item" id="bg3"></div>
        <div class="img-item" id="bg4"></div>
        <div class="img-item" id="bg5"></div>
    </div>
    <div class="pagination-panel">
        <ul class="pagination">
            <li id="dot_0"></li>
            <li id="dot_1"></li>
            <li id="dot_2"></li>
            <li id="dot_3"></li>
            <li id="dot_4"></li>
        </ul>
    </div>
</div>
<div class="content">
    <div class="card">
        <img src="img/shangcheng2x.png" alt="">
        <p>咱的商城</p>
    </div>
    <div class="card">
        <img src="img/duobao@2x.png" alt="">
        <p>粉丝夺宝</p>
    </div>
    <div class="card">
        <img src="img/qianbao@2x.png" alt="">
        <p>咱的钱包</p>
    </div>
    <div class="card">
        <img src="img/waihui@2x.png" alt="">
        <p>外汇</p>
    </div>
    <div class="card">
        <img src="img/baishitong@2x.png" alt="">
        <p>咱的百事通</p>
    </div>
    <div class="card">
        <img src="img/YINUO@2x.png" alt="">
        <p>依诺千金</p>
    </div>
    <div class="card">
        <img src="img/qingmingtang@2x.png" alt="">
        <p>清明堂</p>
    </div>
    <div class="card">
        <img src="img/youpinge@2x.png" alt="">
        <p>优品阁</p>
    </div>
    <div class="card">
        <img src="img/yiqiba@2x.png" alt="">
        <p>一起吧</p>
    </div>
    <div class="card">
        <img src="img/yiyun@2x.png" alt="">
        <p>易云新闻</p>
    </div>
    <div class="card">
        <img src="img/chuangke@2x.png" alt="">
        <p>创业联盟</p>
    </div>
    <div class="card">
        <img src="img/kangyibao@2x.png" alt="">
        <p>康怡宝</p>
    </div>
    <!--<div class="row">-->
        <!--<div class="card">-->
            <!--<img src="img/shangcheng2x.png" alt="">-->
            <!--<p>咱的商城</p>-->
        <!--</div>-->
        <!--<div class="card">-->
            <!--<img src="img/duobao@2x.png" alt="">-->
            <!--<p>粉丝夺宝</p>-->
        <!--</div>-->
        <!--<div class="card">-->
            <!--<img src="img/qianbao@2x.png" alt="">-->
            <!--<p>咱的钱包</p>-->
        <!--</div>-->
        <!--<div class="card">-->
            <!--<img src="img/waihui@2x.png" alt="">-->
            <!--<p>外汇</p>-->
        <!--</div>-->
    <!--</div>-->

    <!--<div class="row">-->
        <!--<div class="card">-->
            <!--<img src="img/baishitong@2x.png" alt="">-->
            <!--<p>咱的百事通</p>-->
        <!--</div>-->
        <!--<div class="card">-->
            <!--<img src="img/YINUO@2x.png" alt="">-->
            <!--<p>依诺千金</p>-->
        <!--</div>-->
        <!--<div class="card">-->
            <!--<img src="img/qingmingtang@2x.png" alt="">-->
            <!--<p>清明堂</p>-->
        <!--</div>-->
        <!--<div class="card">-->
            <!--<img src="img/youpinge@2x.png" alt="">-->
            <!--<p>优品阁</p>-->
        <!--</div>-->
    <!--</div>-->
    <!--<div class="row">-->
        <!--<div class="card">-->
            <!--<img src="img/yiqiba@2x.png" alt="">-->
            <!--<p>一起吧</p>-->
        <!--</div>-->
        <!--<div class="card">-->
            <!--<img src="img/yiyun@2x.png" alt="">-->
            <!--<p>易云新闻</p>-->
        <!--</div>-->
        <!--<div class="card">-->
            <!--<img src="img/chuangke@2x.png" alt="">-->
            <!--<p>创业联盟</p>-->
        <!--</div>-->
        <!--<div class="card">-->
            <!--<img src="img/kangyibao@2x.png" alt="">-->
            <!--<p>康怡宝</p>-->
        <!--</div>-->
    <!--</div>-->

</div>
<div class="footer" id="footer">
    <p>合作加盟热线：4000088761</p>
    <p>地址：浙江省杭州市江干区</p>
    <p>本网站最终解释权归杭州旭阳网络科技有限公司所有</p>
</div>
<script>

    var footer=document.getElementById('footer');
    var height=window.screen.height;
    var c_height=document.body.clientHeight;
//    var f_height=footer.clientHeight;
    if(height<c_height){
        footer.style.position=' ';
    }else{
        footer.style.position='fixed';
        footer.style.bottom='0';
    }



    //封装的对象接受所有图片的盒元素与触发切换的最小滑动距离作为参数
    var ImageSwiper = function(imgs, minRange) {
        this.imgBox = imgs;
        this.imgs = imgs.children;
        this.cur_img = 1 ; //起始图片设为1 ,而非0,将在图片显示方法中作-1处理
        this.ready_moved = true ; //判断每次滑动开始的标记变量
        this.imgs_count = this.imgs.length;
        this.touchX  //触控开始的手指最初落点
        this.minRange = Number(minRange);
        this.fadeIn ; //图片切换的方式,这里使用淡入淡出
        this.fadeOut;
        this.bindTouchEvn();//初始化绑定滑动事件
        this.showPic(this.cur_img) //显示图片方法,注意其中图片编号的-1处理
    };
    ImageSwiper.prototype.bindTouchEvn = function() {
        this.imgBox.addEventListener('touchstart', this.touchstart.bind(this), false);
        this.imgBox.addEventListener('touchmove', this.touchmove.bind(this), false);
        this.imgBox.addEventListener('touchend', this.touchend.bind(this), false);

    };
    ImageSwiper.prototype.touchstart = function(e) {
        if (this.ready_moved) {
            var touch = e.touches[0];
            this.touchX = touch.pageX;
            this.ready_moved = false;

        }

    };

    ImageSwiper.prototype.touchmove = function(e) {
        e.preventDefault();
        var minRange = this.minRange;
        var touchX = this.touchX;
        var imgs_count = this.imgs_count;

        if (!this.ready_moved) {

            var release = e.changedTouches[0];
            var releasedAt = release.pageX;
            if (releasedAt + minRange < touchX) {
                this.ready_moved = true;
                if (this.cur_img > (imgs_count - 1)) {
                    this.cur_img = 0;
                }
                this.cur_img++;
                this.showPic(this.cur_img);

            } else if (releasedAt - minRange > touchX) {
                if (this.cur_img <= 1) {
                    this.cur_img = imgs_count + 1
                }
                this.cur_img--;
                this.showPic(this.cur_img);
                this.ready_moved = true;
            }
        }
    };

    ImageSwiper.prototype.touchend = function(e) {
        e.preventDefault();
        var minRange = this.minRange;
        var touchX = this.touchX;
        var imgs_count = this.imgs_count;
        if (!this.ready_moved) {
            var release = e.changedTouches[0];
            var releasedAt = release.pageX;
            if (releasedAt + minRange < touchX) {
                this.ready_moved = true;
                if (this.cur_img > (imgs_count - 1)) {
                    this.cur_img = 0;
                }
                this.cur_img++;
                showPic(this.cur_img);

            } else if (releasedAt - minRange > touchX) {
                if (this.cur_img <= 1) {
                    this.cur_img = imgs_count + 1
                }
                this.cur_img--;
                showPic(this.cur_img);
                this.ready_moved = true;
            }
        }

    };
    //在样式表中设置好 .fadeIn 的透明度为0
    ImageSwiper.prototype.fadeIn = function(e) {
        e.classList.add("fadeIn")
    };

    ImageSwiper.prototype.fadeOut = function(e) {
        Array.prototype.forEach.call(e, function(e) {
            e.className = "img-item"
        })
    };

    ImageSwiper.prototype.showPic = function(cur_img) {
        this.hidePics(this.imgs);
        //得到图片元素的真实索引
        var index = cur_img - 1;

        if (document.getElementsByClassName("active")[0]) {
            var active = document.getElementsByClassName("active")[0];
            active.classList.remove("active")
        }
        console.log('sssssssssssss'+this.cur_img);
        console.log(index);
        document.getElementById("dot_"+index).classList.add("active");

        this.fadeIn(this.imgs[index]);

    };
    ImageSwiper.prototype.hidePics = function(e) {
        this.fadeOut(e)

    };

    //传参
    var imgs = new ImageSwiper(document.getElementById('imgs'), 30);
</script>
</body>
</html>